<template>
  <div class="main-container container-fluid container-limited page-holder">
    <issues-breadcrumb />
    <div :style="loading ? 'height: 4rem;' : 'display: none;'" v-loading="loading"></div>
    <template v-if="curIssue.id">
      <div class="easy-container border-bottom flex align-items-center">
        <el-avatar :size="24" :src="curIssue.author.avatar" />
        <router-link :to="`/users/${curIssue.author.id}`" class="m-l-5" target="_blank">
          {{ curIssue.author.nickname }}
        </router-link>
        <timeago2 :date-time="curIssue.created_at" pre-text="创建于" class="info m-l-10" />
      </div>
      <h2 class="flex align-items-end" :class="{ 'good-resource-text': curIssue.good }">
        <el-tag v-if="curIssue.good" type="danger" size="small" disable-transitions class="m-r-10">
          精
        </el-tag>
        {{ curIssue.title }}
        <span class="m-l-30">
          <router-link
            v-if="allowEdit"
            :to="`/spaces/${spaceId}/issues/${issueId}/edit`"
            class="el-link el-link--primary"
          >编辑</router-link>
          <delete-issue-link v-if="allowEdit" :issue="curIssue" />
        </span>
      </h2>
      <el-tag v-for="tag in curIssue.tags" :key="tag" size="small">{{ tag }}</el-tag>
      <tinymce-editor v-model="curIssue.content" readonly />
      <div class="m-t-16" style="border-top: 2px dashed #eee;">
        <issue-log ref="issue-log" />
      </div>
      <div class="m-t-16 flex align-items-center p-x-16">
        <vote-like :issue="curIssue" @voted="setCurIssue" />
        <vote-dislike :issue="curIssue" @voted="setCurIssue" />
        <span class="m-x-16"></span>
        <el-button size="small" type="primary" icon="el-icon-edit" @click="answering = !answering">
          写回答
        </el-button>
        <el-button size="small" type="text" @click="commenting = !commenting">评论</el-button>
        <span class="m-l-16"></span>
        <vote-collection :issue="curIssue" @voted="setCurIssue" />
        <set-good v-if="isAdmin" :issue="curIssue" @updated="logChange" />
        <w-x-share
          type="Issue"
          :id="curIssue.id"
          page="pages/issue/index"
          :scene="`${curIssue.space.id}-${curIssue.id}`"
          :share-url="curIssue.wxShare"
          class="m-l-10"
        />
      </div>
      <div class="m-t-16">
        <issues-self-comments :commenting.sync="commenting" />
      </div>
      <div class="border-top m-t-16">
        <div class="title info">回答列表</div>
        <answers-comments :answering.sync="answering" :issue="curIssue" />
      </div>
    </template>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import { formatIssue } from '@/views/issues/format';
import IssuesBreadcrumb from '@/views/issues/components/breadcrumb';
import DeleteIssueLink from '@/components/spaces/issues/DeleteIssueLink';
import VoteLike from '@/views/issues/components/vote-like';
import VoteDislike from '@/views/issues/components/vote-dislike';
import VoteCollection from '@/views/issues/components/vote-collection';
import SetGood from '@/views/issues/components/set-good';
import AnswersComments from '@/components/issues-answers/index';
import IssuesSelfComments from '@/components/issues-comments';
import IssueLog from '@/components/change-log/issue-log';
import WXShare from '@/components/wx-share-code';

export default {
  name: 'IssuesShow',
  components: {
    IssuesBreadcrumb,
    DeleteIssueLink,
    VoteLike,
    VoteDislike,
    VoteCollection,
    SetGood,
    AnswersComments,
    IssuesSelfComments,
    IssueLog,
    WXShare,
  },
  data() {
    return {
      loading: false,
      answering: false,
      commenting: false,
    };
  },
  computed: {
    ...mapState({
      curIssue: 'currentIssue',
    }),
    ...mapGetters(['isWebAdmin', 'isSpaceOwner', 'isSpaceAdmin', 'isIssueAuthor']),
    spaceId() { return this.$route.params.spaceId; },
    issueId() { return this.$route.params.issueId; },
    // 加载问题所需参数
    loadIssueParams() {
      return {
        spaceId: this.spaceId,
        issueId: this.issueId,
      };
    },
    isAdmin() { return this.isWebAdmin || this.isSpaceOwner || this.isSpaceAdmin; },
    allowEdit() { return this.isAdmin || this.isIssueAuthor; },
  },
  created() { this.loadIssue(); },
  mounted() { this.$root.$on('logChange', this.logChange); },
  destroyed() { this.setCurIssue(); },
  methods: {
    ...mapActions({
      setCurIssue: 'setCurrentIssue',
    }),
    // 加载问题
    loadIssue() {
      this.loading = true;
      this.$api.spaceIssues.show(this.loadIssueParams)
        .then(res => this.setCurIssue(formatIssue(res.data)))
        .catch(() => {})
        .then(() => { this.loading = false; });
    },
    // 需要单独拎出来触发日志加载
    logChange(newIssue) {
      this.$refs['issue-log'].refreshLog();
      this.setCurIssue(newIssue);
    },
  },
  watch: {
    loadIssueParams(newVal, oldVal) {
      if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
        this.setCurIssue();
        this.loadIssue();
      }
    },
  },
};
</script>

<style></style>
